{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2023, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<form data-abide novalidate id="{{formPanelId}}Wizard" class="custom creation">
  <div>
    <dl id="{{formPanelId}}Tabs" class="tabs sunstone-info-tabs text-center" data-tabs>
      <dd class="tabs-title is-active"><a href="#vdcCreateGeneralTab"><i class="fas fa-th"></i><br>{{tr "General"}}</a></dd>
      <dd class="tabs-title"><a href="#vdcCreateGroupsTab"><i class="fas fa-users"></i><br>{{tr "Groups"}}</a></dd>
      <dd class="tabs-title"><a href="#vdcCreateResourcesTab"><i class="fas fa-hdd"></i><br>{{tr "Resources"}}</a></dd>
    </dl>
    <div class="tabs-content" data-tabs-content="{{formPanelId}}Tabs">
      <div class="tabs-panel is-active" id="vdcCreateGeneralTab">
        <div class="row">
          <div class="large-6 medium-8 columns">
            <label>
              {{tr "Name"}}
              <input type="text" wizard_field="NAME" required name="name" id="name"/>
            </label>
          </div>
        </div>
        <div class="row">
          <div class="large-6 medium-8 columns">
            <label for="DESCRIPTION" >
              {{tr "Description"}}
              <textarea type="text" wizard_field="DESCRIPTION" id="DESCRIPTION" name="DESCRIPTION"/>
            </label>
          </div>
        </div>
        <br>
        <div class="row">
          <div class="large-12 columns">
            <span>{{tr "Custom attributes"}}</span>
            <br>
            <br>
          </div>
        </div>
        {{{customTagsHTML}}}
      </div>
      <div id="vdcCreateGroupsTab" class="tabs-panel">
        {{{groupsTableHTML}}}
      </div>
      <div id="vdcCreateResourcesTab" class="tabs-panel">
        {{{resourcesTabHTML}}}
      </div>
    </div>
  </div>
</form>
